<template>
	<view class="">
		<view class="" style="padding-top: 80px;">
			<view class="">
				<view class="flex j-c a-c" style="padding-bottom: 80rpx;">
					<view>
						<image v-if="settings.login_logo" class="b_y" style="width: 150rpx;height: 150rpx;"
							:src="settings.login_logo|getImg">
						</image>
					</view>
				</view>
				<template v-if="settings.is_login_set == 1 ">
					<view class="flex j-c">
						<view class="flex a-c j-c by1 bg-white" style="border: solid 6rpx #F5F5F5;">
							<view class="  flex j-c a-c by1"
								:class="currenindex==0?'login_option_active button_bg':'login_option'"
								@tap.stop="on_mode(0)">
								密码登录
							</view>
							<view v-if="settings.is_sms==1" class="login flex j-c a-c by1"
								:class="currenindex==1?'login_option_active button_bg':'login_option'"
								@tap.stop="on_mode(1)">
								验证码登录
							</view>
						</view>
					</view>
					<view class="p3 " style="padding-top: 40px;">
						<bmInput bicon="&#xe67b;" v-model="tel" placeholder="请输入账号/手机号"></bmInput>
						<block v-if="currenindex === 0">
							<view class="pt5"> </view>
							<bmInput type='password' bicon="&#xe6c0;" v-model="password" placeholder="请输入密码"></bmInput>
							<view v-if="settings.reg_img_code==1" class="pt5">
								<bmInput @get_imgCode='get_imgCode' bicon="&#xe67a;" v-model="v_code"
									placeholder="请输入图形验证码" :codeimg="settings.code_img_rand"></bmInput>
							</view>
						</block>
						<block v-if="currenindex === 1">
							<view class="pt5" v-if="settings.sms_img_code==1">
								<bmInput @get_imgCode='get_imgCode' bicon="&#xe67a;" v-model="v_code"
									placeholder="请输入图形验证码" :codeimg="settings.code_img_rand"></bmInput>
							</view>
							<view class="pt5">
								<bmInput @getCode='getCode' bicon="&#xe67a;" v-model="smscode" placeholder="请输入短信验证码"
									:tips="tips"></bmInput>
							</view>
						</block>
						<view class="flex j-c pt8">
							<view @click="account_login" class="flex j-c a-c by1 cff button_bg"
								style="width: 88%;height: 40px;">
								登录
							</view>
						</view>
						<view class="flex j-c pt5">
							<view class="f30" v-if="settings.is_account==1" @click="user_reg">注册账号 </view>
						</view>
					</view>
				</template>



				<template v-if="settings.is_login_set == 0 ">
					<view class="flex j-c a-c">
						<view class="t_c">

							<!-- #ifdef H5 -->
							<view @click="on_login" class="flex j-c a-c b_y cff but_login">
								<text>微信授权登录</text>
							</view>
							<!-- #endif -->
							<!-- #ifdef MP-WEIXIN -->
							<login-mp-weixin :userName="userName" :agr="agr" :avatarUrl="avatarUrl"
								@confirm="basic_information"></login-mp-weixin>
							<!-- #endif -->
							<!-- #ifdef MP-TOUTIAO -->
							<login-mp-toutiao :userName="userName" :agr="agr" :avatarUrl="avatarUrl"
								@confirm="basic_information"></login-mp-toutiao>
							<!-- #endif -->
							<!-- #ifdef MP-QQ -->
							<login-mp-qq :userName="userName" :agr="agr" :avatarUrl="avatarUrl"
								@confirm="basic_information"></login-mp-qq>
							<!-- #endif -->
							<!-- #ifdef MP-ALIPAY -->
							<login-mp-ali :userName="userName" :agr="agr" :avatarUrl="avatarUrl"
								@confirm="basic_information"></login-mp-ali>
							<!-- #endif -->
							<!-- #ifdef MP-BAIDU -->
							<login-mp-baidu :userName="userName" :agr="agr" :avatarUrl="avatarUrl"
								@confirm="basic_information"></login-mp-baidu>
							<!-- #endif -->
							<!-- #ifdef APP -->
							<view @click="on_login" class="flex j-c a-c b_y cff but_login">
								<text>微信授权登录</text>
							</view>
							<!-- #endif -->
							<!-- #ifdef MP-KUAISHOU -->
							<login-mp-kuaishou :userName="userName" :agr="agr" :avatarUrl="avatarUrl"
								@confirm="basic_information"></login-mp-kuaishou>
							<!-- #endif -->
							<view class="" style="height: 30px;">
							</view>
						</view>
					</view>
				</template>
				<view class="flex a-c j-c  " style="padding-top: 20rpx;">
					<view @click="on_agr" class="b_y flex a-c j-c"
						style="width: 30rpx;height: 30rpx;border: solid 2rpx #A9A9A9;">
						<text v-if="agr" class="f26 " style="color: #A9A9A9;">✓</text>
					</view>
					<text class="f30  ml1  " style="color: #A9A9A9;">我已阅读并同意</text>
					<text class="f30 " style="color: #1E90FF;" @click="article_view(article_2)">
						隐私条款
					</text>
					<text style="color: #A9A9A9;">和</text>
					<text class="f30 " style="color: #1E90FF;" @click="article_view(article_1)">
						用户协议
					</text>
				</view>
				<view class="pt8 pb3">
					<!-- #ifndef APP -->
					<view v-if="settings.is_sms == 1 || settings.is_account == 1" class="flex a-c j-c"
						style="padding-bottom: 10px;">
						<text class="c_7">其他登录方式</text>
					</view>
					<!-- #endif -->
					<!-- #ifdef APP -->
					<view v-if="plugin_set.app_ios_bind==1  || app_login_wx ==  1" class="flex a-c j-c"
						style="padding-bottom: 10px;">
						<text class="c_7">其他登录方式</text>
					</view>
					<!-- #endif -->
					<view class="flex j-c" style="width: 750rpx;">
						<!-- #ifndef APP -->
						<view class="flex j-c a-c but_width"
							v-if="settings.is_login_set == 1 && settings.is_wechats == 1">
							<view>
								<!-- #ifdef MP-WEIXIN -->
								<login-mp-weixin :userName="userName" is_style='img' :agr="agr" :avatarUrl="avatarUrl"
									@confirm="basic_information"></login-mp-weixin>
								<!-- #endif -->
								<!-- #ifdef MP-KUAISHOU -->
								<login-mp-kuaishou :userName="userName" is_style='img' :agr="agr" :avatarUrl="avatarUrl"
									@confirm="basic_information"></login-mp-kuaishou>
								<!-- #endif -->
								<!-- #ifdef H5 -->
								<image @click="on_login" class="q_y login_icon" src="@/static/icon/weixin.png">
								</image>
								<!-- #endif -->
								<!-- #ifdef MP-TOUTIAO -->
								<login-mp-toutiao :userName="userName" is_style='img' :agr="agr" :avatarUrl="avatarUrl"
									@confirm="basic_information"></login-mp-toutiao>
								<!-- #endif -->
								<!-- #ifdef MP-QQ -->
								<login-mp-qq :userName="userName" is_style='img' :agr="agr" :avatarUrl="avatarUrl"
									@confirm="basic_information"></login-mp-qq>
								<!-- #endif -->
								<!-- #ifdef MP-ALIPAY -->
								<login-mp-ali :userName="userName" is_style='img' :agr="agr" :avatarUrl="avatarUrl"
									@confirm="basic_information"></login-mp-ali>
								<!-- #endif -->
								<!-- #ifdef MP-BAIDU -->
								<login-mp-baidu :userName="userName" is_style='img' :agr="agr" :avatarUrl="avatarUrl"
									@confirm="basic_information"></login-mp-baidu>
								<!-- #endif -->
							</view>
						</view>

						<!-- #endif -->
						<!-- 手机登录 -->
						<view class="flex j-c a-c but_width" v-if="settings.is_sms == 1 && settings.is_login_set==0 ">
							<!-- #ifndef MP-WEIXIN -->
							<image @click="on_login_tel(1)" class="q_y login_icon" src="../../static/icon/tel.png">
							</image>
							<!-- #endif -->

							<!-- #ifdef MP-WEIXIN -->
							<button v-if="plugin_set.wx_login_sms==1 && agr " class="bg-white flex"
								open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">
								<image class="q_y login_icon" src="../../static/icon/tel.png">
								</image>
							</button>
							<button v-else @click="agr_but" class="bg-white flex">
								<image class="q_y login_icon" src="../../static/icon/tel.png">
								</image>
							</button>
							<!-- #endif -->
						</view>
						<view class="flex j-c a-c but_width"
							v-if="settings.is_account == 1  && settings.is_login_set==0">
							<image @click="on_login_tel(0)" class="q_y login_icon" src="../../static/icon/account.png">
							</image>
						</view>
						<!-- #ifdef APP -->
						<view v-if="app_login_wx ==  1" class="flex j-c a-c but_width" @click="on_login">
							<image class="q_y login_icon" src="@/static/icon/weixin.png">
							</image>
						</view>
						<view v-if="platform=='ios' && plugin_set.app_ios_bind==1 " class="flex j-c a-c but_width"
							style="margin: 5px;">
							<login-app-apple :userName="userName" is_style='img' :agr="agr" :avatarUrl="avatarUrl"
								@confirm="basic_information"></login-app-apple>
						</view>
						<!-- #endif -->
					</view>
				</view>
			</view>
		</view>
		<userTelBang ref="userTelBang" :is_information="is_information">
		</userTelBang>
	</view>
</template>

<script>
	import bmInput from './component/bm_input.vue'
	import userTelBang from './user_tel_bang.vue'
	export default {
		components: {
			bmInput,
			userTelBang
		},
		data() {
			return {
				currenindex: 0,
				tips: '获取验证码',
				password: '',
				tel: '',
				smscode: '',
				agr: false,
				settings: {},
				v_code: '',
				user: {},
				avatarUrl: '',
				userName: '',
				is_information: false,
				set_tel: '授权手机号',
				platform: '',
				plugin_set: {},
				app_login_wx: 0,
				article_2:uni.getStorageSync('article_2'),
				article_1:uni.getStorageSync('article_1'),
			}
		},
		onShow() {
			// #ifdef H5
			this.h5_weixin_login();
			// #endif
			// #ifdef MP-WEIXIN
			this.getCode_wx()
			// #endif
		},
		onLoad() {
			this.wx_mp_login = 0;
			this.platform = uni.getSystemInfoSync().platform;
			this.encryptedData = '';
			this.init();

		},
		methods: {
			agr_but() {
				if (this.plugin_set.wx_login_sms == 1) {
					uni.showToast({
						title: '请先同意协议',
						icon: 'error',
						duration: 1000
					})
					return
				}
				this.settings.is_login_set = 1;
				this.currenindex = 1
			},
			getPhoneNumber(e) {
				let requestParams = {
					errMsg: e.detail.errMsg,
					agr: this.agr,
					wx_code: this.wx_code,
				};
				this.Banmikeji.getPhoneNumber(requestParams).then(ret => {
					this.wx_tel(e.detail.encryptedData, e.detail.iv, ret)
				})
			},
			getCode_wx() {
				this.Banmikeji.mp_wx_code().then(ret => {
					this.wx_code = ret;
				})
			},
			on_login_tel(currenindex) {
				this.settings.is_login_set = 1;
				this.currenindex = currenindex
			},
			user_reg() {
				uni.navigateTo({
					url: '/pages/banmi/user_reg'
				})
			},
			get_imgCode() {
				let data = {
					code_img: this.settings.code_img,
				};

				this.Banmikeji.get_imgCode(data).then(ret => {

					this.settings.code_img_rand = ret.code_img_rand;


					this.v_id = ret.v_id;


				})
			},
			init() {
				this.app_login_wx = 0;
				this.Banmikeji.login_init({}).then(ret => {
					this.settings = ret.settings;

					this.plugin_set = ret.plugin_set;

					// #ifdef APP
					if (this.plugin_set.app_wx_bind == 0) { //0未开启
						this.settings.is_login_set = 1
					} else { //已开启 判断已什么为主
						if (this.plugin_set.app_login_primary == 1) {
							this.settings.is_login_set = 1
							this.app_login_wx = 1;
						}
					}
					// #endif
					this.v_id = this.settings.v_id;

				})
			},
			on_login(e) {
				if (!this.agr) {
					uni.showToast({
						title: '请勾选同意协议',
						icon: "none"
					});
					return;
				}
				this.on_login_ajax(e);
			},
			on_login_ajax(e) {
				var that = this;
				uni.showLoading({
					title: '正在连接...'
				})
				// #ifdef H5
				//微信公众号授权登录
				let link = window.location.href;
				if (link.indexOf("?code") != -1) {
					link = uni.getStorageSync('link')
				} else {
					uni.setStorage({
						key: 'link',
						data: link
					});
				}
				let code = null;
				if (!this.settings) {
					uni.showToast({
						title: '公众号appid未填',
						icon: "none"
					});
					return;
				}

				let appid = this.settings['apppid'];
				var http = window.location.protocol;
				var com = window.location.host;
				var url = encodeURIComponent(link);

				window.location.href =
					`https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${url}&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect`;

				// #endif
				// #ifdef APP
				this.app_wx_login();
				// #endif
			},

			//app微信授权登录
			app_wx_login() {
				uni.hideLoading()
				var that = this
				uni.getProvider({
					service: 'oauth',
					success: function(res) {
						 
						 
						if (~res.provider.indexOf('weixin')) {
							 
							uni.login({
								"provider": "weixin",
								"onlyAuthorize": true,
								success: function(res) {
									uni.showLoading({
										title: '正在登录...'
									}) 
							 
									var code = res.code;
									that.wx_code = res.code;
									let requestParams = {
										app_wx_code: code,
										face: that.avatarUrl,
										nickname: that.userName,
										sex: that.sex,
									};
									that.Banmikeji.app_wx_login(requestParams).then(ret => {
										that.basic_information(ret);
									})
								},
								fail: function(res) {
									uni.showToast({
										title: res.errMsg,
										icon: 'none'
									})

								}
							})
						}

					},
					fail(err) {
						console.log("res: " + JSON.stringify(err));
						uni.hideLoading()
					}
				});
			},
			//微信授权手机号登录
			wx_tel(encryptedData, iv, code) {
				uni.showLoading({
					title: '正在登录中...'
				})
				let requestParams = {
					encryptedData: encryptedData,
					iv: iv,
					code: code
				};
				this.Banmikeji.mp_wx_login_tel(requestParams).then(ret => {
					this.basic_information(ret);
				})
			},
			//完善资料
			basic_information(user) {
				let that = this;
				this.is_information = true;
				user.wx_code = this.wx_code;
				this.user = user;
				this.$refs.userTelBang.zi_init(user, that.settings, that.plugin_set)
			},
			//微信公众号登录
			h5_weixin_login() {
				let link = window.location.href;


				let code = null;
				let temp = link.split("code=")[1];
				if (!temp) {
					return
				}
				code = temp.split("&")[0];
				if (code == uni.getStorageSync('h5_wx_code')) {
					return
				}
				uni.setStorage({
					key: 'h5_wx_code',
					data: code
				});


				let requestParams = {
					code: code,
					id: this.v_id,
					is_login: '普通登录',
				};
				this.Banmikeji.h5_weixin_login(requestParams).then(ret => {

					if (ret == 40163) {
						return
					}
					ret.wx_mp_code = code
					this.basic_information(ret);
				})
			},
			on_agr() {
				this.agr = !this.agr
			},
			article_view(index) {
				uni.navigateTo({
					url: '/pages/banmi/article_view?id=' + index
				})
			},
			on_mode(index) {
				this.currenindex = index
			},
			// 获取验证码
			getCode() {
				if (this.is_getCode) {
					return
				}
				if (this.codetime > 0) {
					return;
				}

				let requestParams = {
					phone: this.tel,
					v_code: this.v_code,
					id: this.v_id,
					is_agr: true,
					agr: this.agr
				};

				this.Banmikeji.tel_message(requestParams).then(ret => {
					if (ret == 200) {
						this.is_getCode = true;
						this.tips = 120;

						let timer = setInterval(() => {
							this.tips--;
							if (this.tips < 1) {
								clearInterval(timer);
								this.tips = '获取验证码';
								this.is_getCode = false;
							}
						}, 1000);
					}
				})
			},
			isPhone() {
				let mPattern = /^1[23456789]\d{9}$/;
				return mPattern.test(this.phone);
			},
			is_tel_reg() {
				if (this.tips == '获取验证码') {
					uni.showToast({
						title: '请先获取验证码',
						icon: 'none'
					});
					return;
				}
				if (!this.smscode) {
					uni.showToast({
						title: '请输入手机验证码',
						icon: 'none'
					});
					return;
				}
				let requestParams = {
					tel: this.tel,
					smscode: this.smscode,
					code: uni.getStorageSync('code'),
					id: this.v_id,
					invite_code: uni.getStorageSync('invite_code')
				};
				this.Banmikeji.app_tel_login(requestParams).then(ret => {

					this.basic_information(ret);
				})
			},
			account_login() {
				if (!this.tel) {
					uni.showToast({
						title: '请输入手机号',
						icon: 'none'
					});
					return;
				}
				if (!this.agr) {
					uni.showToast({
						title: '请勾选同意协议',
						icon: "none"
					});
					return;
				}
				if (this.currenindex == 1) {
					this.is_tel_reg();
					return
				}

				let requestParams = {
					tel: this.tel,
					password: this.password,
					v_code: this.v_code,
					id: this.v_id,
					invite_code: uni.getStorageSync('invite_code')
				};
				this.Banmikeji.pwd_login(requestParams).then(ret => {
					this.basic_information(ret);
				})
			},


		}
	}
</script>

<style lang="scss" scoped>
	.but_width {
		width: 90rpx;
	}

	button::after {
		border: none;
	}

	button {
		padding: 0;
		background-color: transparent;

	}


	.refreshIcon {
		width: 140rpx;
		height: 140rpx;
		border-radius: 50%;
		border: solid 2rpx #32CD32;
	}

	.userName {
		padding: 10rpx 10rpx 10rpx;
		display: flex;
		align-items: center;
		justify-content: center;

		.weui-input {
			padding: 20rpx;
			border: solid 2rpx #32CD32;
			border-radius: 10rpx;
		}
	}

	.btn {
		width: 100%;
		display: flex;
		justify-content: center;

		.btn-sub {
			width: 670rpx;
			height: 80rpx;
			background: #32CD32;
			border-radius: 45rpx;
			font-size: 36rpx;
			color: #fff;
		}
	}


	.login_option_active {

		width: 120px;
		height: 40px;

		font-size: 30rpx;
	}

	.login_option {

		width: 120px;
		height: 40px;
		color: #333;
		font-size: 30rpx;
	}
</style>